<template>
  <div class="other frame_content">
    <div class="dl-second-nav" style="height: 750px;">
      <div class="dl-second-tree" id="J_webTree">
        <ul
          class="bui-side-menu bui-menu"
          aria-disabled="false"
          style="height: 750px;"
          aria-pressed="false"
        >
          <li
            class="bui-menu-item menu-second"
            aria-disabled="false"
            data-id="menu-item1"
            aria-pressed="false"
          >
            <div class="bui-menu-title">
              <s ref="otherSet" @click="otherSet()"></s>
              <span class="bui-menu-title-text">其它设置</span>
            </div>
            <ul
              v-show="isShow"
              class="bui-menu"
              aria-disabled="false"
              aria-pressed="false"
            >
              <router-link
                class="bui-menu-item menu-leaf"
                v-for="otherList in otherLists"
                tag="li"
                :to="otherList.href"
                @click.native="cgtab(otherList)"
                :key="otherList.id"
                active-class="other-act"
              >
                <a href="">
                  <em>{{ otherList.name }}</em>
                </a>
              </router-link>
            </ul>
          </li>
        </ul>
      </div>
      <div class="dl-second-slib-con">
        <div @click="otherSwitch" class="dl-second-slib"></div>
      </div>
    </div>
    <div class="dl-inner-tab" id="J_webTab">
      <div
        aria-disabled="false"
        style="height: 100%;overflow-y: auto;"
        aria-pressed="false"
      >
        <div class="tab-nav-bar">
          <s class="tab-nav-arrow arrow-left"></s>
          <div ref="tabnav" class="tab-nav-wrapper">
            <div class="tab-nav-inner">
              <ul ref="tabul" class="tab-nav-list" style="height:21px;">
                <router-link
                  v-for="tab in otherLists"
                  :key="tab.id"
                  tag="li"
                  :to="tab.href"
                  ref="tab_li"
                  class="bui-nav-tab-item tab-nav-actived"
                  title="tab.name"
                  active-class="tab-act"
                  v-show="tab.isActive"
                >
                  <span class="tab-item-title">{{ tab.name }}</span>
                  <s @click="tabclose(tab)" class="tab-item-close"></s>
                </router-link>
              </ul>
            </div>
          </div>
          <s class="tab-nav-arrow arrow-right"></s>
        </div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      otherLists: [
        // {
        //   id: 1,
        //   name: "管理员信息",
        //   href: "/index/other/admin",
        //   isActive: true
        // },
        // {
        //   id: 2,
        //   name: "虚假用户",
        //   href: "/index/other/falseuser",
        //   isActive: false
        // },
        // {
        //   id: 3,
        //   name: "敏感操作日志",
        //   href: "/index/other/log",
        //   isActive: false
        // },
        // {
        //   id: 4,
        //   name: "手动上分",
        //   href: "/index/other/upperscore",
        //   isActive: false
        // },
        // {
        //   id: 5,
        //   name: "手动下分",
        //   href: "/index/other/lowerscore",
        //   isActive: false
        // },
        // {
        //   id: 6,
        //   name: "历史上分记录",
        //   href: "/index/other/toprecord",
        //   isActive: false
        // },
        // {
        //   id: 7,
        //   name: "历史下分记录",
        //   href: "/index/other/subrecord",
        //   isActive: false
        // },
        // {
        //   id: 8,
        //   name: "赛车(手动开奖退还)",
        //   href: "/index/other/aracing",
        //   isActive: false
        // },
        // {
        //   id: 9,
        //   name: "飞艇(手动开奖退还)",
        //   href: "/index/other/airship",
        //   isActive: false
        // },
        // {
        //   id: 10,
        //   name: "时彩(手动开奖退还)",
        //   href: "/index/other/gambling",
        //   isActive: false
        // },
        // {
        //   id: 11,
        //   name: "极速(手动开奖退还)",
        //   href: "/index/other/rapidly",
        //   isActive: false
        // },
        // {
        //   id: 12,
        //   name: "澳10(手动开奖退还)",
        //   href: "/index/other/australia10",
        //   isActive: false
        // },
        // {
        //   id: 13,
        //   name: "澳5(手动开奖退还)",
        //   href: "/index/other/australia5",
        //   isActive: false
        // },
        // {
        //   id: 14,
        //   name: "文章列表",
        //   href: "/index/other/articleList",
        //   isActive: false
        // },
        // {
        //   id: 15,
        //   name: "发布文章",
        //   href: "/index/other/publisharticle",
        //   isActive: false
        // },
        // {
        //   id: 17,
        //   name: "账户充值记录",
        //   href: "/index/other/recording",
        //   isActive: false
        // },
        {
          id: 16,
          name: "账户充值",
          href: "/index/other/recharge",
          isActive: false
        }
      ]
    };
  },
  methods: {
    otherSet() {
      this.isShow = !this.isShow;
      let otherSet = this.$refs.otherSet;
      if (this.isShow) {
        otherSet.style = "background-position : 0 -71px";
      } else {
        otherSet.style = "background-position : 0 -30px";
      }
    },
    otherSwitch() {},
    cgtab(item) {
      this.$nextTick(() => {
        setTimeout(() => {
          var tabnav = this.$refs.tabnav;
          var tabul = this.$refs.tabul;
          var tabli = tabul.children;
          var width = 0;
          var left = 0;
          var less = 0;
          for (let i = 0; i < tabli.length; i++) {
            width += tabli[i].clientWidth;
            less = width / tabli[0].clientWidth;
          }
          tabul.style.width = width + "px";
          left = tabnav.clientWidth - width + less * 12;
          // if(left<0){
          //   tabul.style.left =  left + 'px'
          // }
        });
      });
      item.isActive = true;
    },
    tabclose(tab) {
      // tab.stopPropagation()
      tab.isActive = false;
    }
  }
};
</script>

<style>
html,
body,
.content,
.dl-tab-item,
.dl-inner-tab,
.dl-second-nav,
.dl-second-tree,
.bui-side-menu,
.bui-nav-tab,
.tab-content-container {
  height: 100% !important;
}
.other {
  font-family: "SimSun", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.other a {
  text-decoration: none;
}
.other li {
  line-height: 22px;
}
.dl-second-nav {
  float: left;
  width: 150px;
  position: relative;
  padding-top: 5px;
  background-color: #e8e9ee;
}
.dl-second-tree {
  width: 150px;
  float: left;
}
.bui-side-menu {
  height: 100%;
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 3px;
}
.bui-menu {
  list-style: none;
  margin: 0;
}
.bui-side-menu .menu-second {
  padding-top: 1px;
  outline: 0;
}
.bui-menu .bui-menu-item {
  cursor: pointer;
}
.bui-side-menu .bui-menu-title {
  margin: 0 1px;
  background-position: 0 15px;
  height: 17px;
  color: #636775;
  font-weight: bold;
  overflow: hidden;
  line-height: 25px;
  vertical-align: middle;
  padding: 8px 0 5px 5px;
}

.bui-side-menu .bui-menu-title-text {
  float: left;
  overflow: hidden;
  height: 14px;
  line-height: 14px;
  display: block;
  _margin-top: -2px;
}
.bui-side-menu .menu-second .bui-menu {
  margin-top: 5px;
}
.bui-side-menu .menu-second .bui-menu-item {
  outline: 0;
  line-height: 20px;
}
.bui-side-menu .menu-second .bui-menu-item a {
  height: 20px;
  text-indent: 24px;
  overflow: hidden;
  margin-bottom: 5px;
  display: block;
}
.bui-side-menu .menu-second .bui-menu-item a em {
  display: block;
  margin: 0 1px;
  font-style: normal;
  text-align: left;
  overflow: hidden;
  height: 19px;
  line-height: 22px;
  cursor: pointer;
  _line-height: 20px;
  border-radius: 4px;
}
.dl-second-nav .bui-menu .other-act a em {
  color: #fff;
  background: #36a;
}
.bui-side-menu a {
  color: #5c637b;
  outline: 0;
}
.dl-second-nav .bui-menu .bui-menu-item a:hover {
  color: #414da7;
}
.bui-side-menu .bui-menu-title,
.bui-side-menu .bui-menu-title s,
.bui-side-menu .menu-second a,
.bui-side-menu .menu-second em {
  background: url(../../../images/T1GgTxXm4qXXaGyjny-500-188.png) -9999px -9999px
    no-repeat;
}
.tab-nav-bar,
.tab-nav-arrow,
.tab-nav-wrapper,
.tab-nav-inner,
.bui-nav-tab-item,
.tab-item-close {
  background: url(../../../images/T1SLHBXaXmXXXF.Nbe-140-120.gif) -9999px -9999px
    no-repeat;
}
.bui-side-menu .bui-menu-title s {
  width: 10px;
  height: 10px;
  overflow: hidden;
  display: block;
  float: left;
  margin-right: 5px;
  margin-top: 1px;
  background-position: 0 -71px;
}
.tab-nav-wrapper s {
  cursor: pointer;
}
.dl-second-slib {
  position: absolute;
  height: 100%;
  left: 148px;
  width: 6px;
  cursor: pointer;
  top: 25px;
  border-left: 1px solid #c3c3d6;
  border-radius: 2px;
  background: url(../../../images/left-slib.gif) no-repeat 0 center transparent;
}
.dl-inner-tab {
  margin-left: 150px;
}
.dl-inner-tab .bui-nav-tab,
.dl-inner-tab .tab-nav-inner {
  background-color: #e8e9ee;
}
.dl-inner-tab .bui-nav-tab {
  padding-top: 5px;
}
.tab-nav-bar {
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  height: 21px;
  background-position: 0 20px;
  background-repeat: repeat-x;
}
.arrow-left {
  background-position: 0 -60px;
  left: 5px;
}
.tab-nav-arrow {
  display: block;
  position: absolute;
  text-decoration: none;
  overflow: hidden;
  width: 13px;
  height: 13px;
  text-indent: -99px;
  top: 4px;
}
.tab-nav-wrapper {
  margin: 0 23px;
  background-position: 0 -100px;
  background-repeat: repeat-x;
}
.tab-nav-inner {
  background-position: 0 20px;
  background-repeat: repeat-x;
  background-color: #e2eaf4;
  margin: 0 2px;
  overflow: hidden;
  position: relative;
}
.tab-nav-list {
  position: relative;
  left: 0;
  padding: 0;
  margin: 0;
  *zoom: 1;
}

.bui-nav-tab-item {
  background-position: 0 -4px;
  color: #263e74;
  float: left;
  width: 87px;
  height: 21px;
  margin-right: -12px;
  position: relative;
  cursor: pointer;
  padding: 0 33px 0 20px;
  z-index: 1;
  overflow: hidden;
}
.tab-item-title {
  cursor: pointer;
}
.tab-item-close {
  display: block;
  position: absolute;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  width: 13px;
  height: 13px;
  text-indent: -99px;
  top: 4px;
  right: 17px;
  background-position: 0 -80px;
}
.tab-item-close:hover {
  background-position: -20px -80px;
}
.tab-act {
  background-position: 0 -29px;
  z-index: 2;
}
</style>
